HTML
ایران گستر در صدد آن است تا با آموزش های تصویری خود, شما را با به روز ترین زبان های برنامه نویسی آشنا کند تا با یادگیری آنها بتوانبد وارد بازار کار شوید و کسب و کار خود را رونق بخشید. از این پس آموزش های HTML مارا دنبال کنید.
[caption id="attachment_3063" align="aligncenter" width="255"]
HTML[/caption]
عناصر معنایی (Semantics)
Semantics به خودی خود و جدا از دنیای برنامه نویسی، مطالعه ی معنی کلمات و عبارات در یک زبان است و از دروس دانشگاهی بسیاری از رشته های علوم انسانی می باشد. اما در دنیای وب زمانی که می گوییم عناصر Semantic یعنی عناصری که فقط عنصر ظاهری نیستند بلکه معنی خاصی را نیز با خودشان دارند. این معنی از یک طرف برای مرورگر و موتور های جست و جو است و از طرف دیگر برای توسعه دهندگان.(ایران گستر)
عناصر غیر معنایی یا non-semantic مانند <div> و <span> معنا یا اطلاعاتی را در مورد محتوای خود به ما نمی دهند اما عناصر معنایی یا semantic مانند <form> و <table>و <article> مشخص می کنند که چه نوع محتوایی دارند.(ایران گستر)
قبل از ارائه ی HTML5 برای مشخص کردن قسمت های مختلف صفحه از کدهایی مثل <“div id=”nav> یا <“div class=”header> استفاده می کردیم اما امروزه چنین کاری منسوخ شده است (متاسفانه برخی از توسعه دهندگان هنوز هم این کار را می کنند). اجزای مختلف یک صفحه در HTML5 به این شکل است:(ایران گستر)
طرح کلی HTML5
بنابراین HTML5 عناصر معنایی جدیدی را برای پایه ریزی این طرح به ما می دهد:(ایران گستر)
- <article>
- <aside>
- <details>
- <figcaption>
- <figure>
- <footer>
- <header>
- <main>
- <mark>
- <nav>
- <section>
- <summary>
- <time>
عنصر <section>
این عنصر وظیفه ی تعریف یک قسمت خاص را در سند شما بر عهده دارد. بر اساس documentation ارائه شده از سمت W3C، این عنصر:(ایران گستر)
A section is a thematic grouping of content, typically with a heading.
یعنی عنصر <section> مجموعه ای از محتوا را که موضوع و مضمون مشابهی دارند در یک قسمت جمع می کند و معمولا یک heading نیز به آن ها می دهد. بنابراین صفحه ی اصلی سایت شما می تواند به <section> های مختلفی مانند مقدمه، محتوا، اطلاعات تماس و … تقسیم شود.(ایران گستر)
مثال:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<!DOCTYPE html>
<html>
<body>
<section>
<h1>WWF</h1>
<p>The World Wide Fund forNature(WWF)isan international organization working on issues regarding the conservation,research andrestoration of the environment,formerly named the World Wildlife Fund.WWF was founded in1961.</p>
</section>
<section>
<h1>WWF'sPanda symbol</h1>
<p>The Panda has become the symbol of WWF.The well-known panda logo of WWF originated fromapanda named Chi Chi that was transferred from the Beijing Zoo tothe London Zoo inthe same year of the establishment of WWF.</p>
</section>
</body>
</html>
|
مشاهده ی خروجی در JSBin
عنصر <article>
این عنصر محتوای مستقل و جداگانه ای در صفحه را مشخص می کند. یک <article> باید به خودی خود با معنی باشد به طوری که اگر تمام قسمت های دیگر صفحه را حذف کنیم باز هم آن قسمت به صورت جداگانه قابل خواندن و درک باشد و به هیچ عنوان به قسمت های دیگر وابسته نباشد. نمونه های <article> عبارت اند از:(ایران گستر)
- پست هایی که کاربران در یک فروم (انجمن اینترنتی) می گذارند.
- پست هایی که در وبلاگ ها می گذاریم.
- مقالات مختلف در سایت های خبری.
به مثال زیر توجه کنید:(ایران گستر)
|
|
<!DOCTYPE html>
<html>
<body>
<article>
<h1>What Does WWF Do?</h1>
<p>WWF's mission is to stop the degradation of our planet'snatural environment,andbuildafuture inwhich humans live inharmony with nature.</p>
</article>
</body>
</html>
|
مشاهده ی خروجی در JSBin
تو در تو سازی <article> در <section>
آیا تو در تو سازی <article> در <section> و یا بالعکس شدنی است؟ <article> مشخص کننده ی مقالات مستقل و جداگانه در صفحه ی ما بود. <section> نیز تعریف کننده ی یک قسمت خاص در صفحه ی ما بود.(ایران گستر)
سوال اینجاست: آیا قانون خاصی برای ترکیب این عناصر معنایی به جز معنی شان وجود دارد؟ پاسخ شما خیر است!
حتما در بعضی از وب سایت های اینترنتی دیده اید که <section> درون تگ <article> قرار دارد و <article> نیز دارای تگ های <section> است. همچنین برعکس این موضوع را نیز مشاهده کرده اید. به طور مثال ممکن است در یک خبرگزاری اینترنتی، مقالات ورزشی در یک <article> گذاشته شوند که قسمت (section) ورزشی قرار دارند، و از طرفی همان <article> ممکن است قسمت (section) های فنی داشته باشد. بنابراین تو در تو سازی (nesting) این عناصر بر پایه ی معنای آن ها است.(ایران گستر)
عنصر <header>
این عنصر یک header (موضوع) برای کل سند شما و یا یک section در صفحه ی شما تعیین می کند. در واقع باید از <header> به صورت نگه دارنده ی اطلاعاتی مانند موضوع و … استفاده کرد و از آن جایی که می توان چند مقاله در یک صفحه داشت، می توانیم چندین <header> نیز در یک صفحه داشته باشیم.(ایران گستر)
به مثال زیر توجه کنید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<!DOCTYPE html>
<html>
<body>
<article>
<header>
<h1>What Does WWF Do?</h1>
<p>WWF's mission:</p>
</header>
<p>WWF'smission istostop the degradation of our planet'snatural environment,andbuildafuture inwhich humans live inharmony with nature.</p>
</article>
</body>
</html>
|
مشاهده ی خروجی در JSBin
عنصر <footer>
این عنصر برای صفحه ی شما یک footer (قسمت پایینی وب سایت یا یک مقاله که معمولا اطلاعات تکمیلی مانند اطلاعات تماس یا نام نویسنده در آن قرار می گیرد) تعیین می کند. بنابراین <footer> باید اطلاعاتی در مورد عنصر نگه دارنده اش داشته باشد و معمولا شامل این موارد می شود: نام نویسنده، اطلاعات مربوط به کپی رایت، شرایط و قوانین استفاده، اطلاعات تماس و …. . از آنجا که می توان چندین مقاله در یک صفحه داشت، می توانیم چندین <footer> نیز در یک صفحه داشته باشیم.(ایران گستر)
به مثال زیر توجه کنید:
1
2
3
4
5
6
7
8
9
10
11
12
|
<!DOCTYPE html>
<html>
<body>
<footer>
<p>Posted by:Amir Zouerami</p>
<p>Contact information:<ahref="mailto:Zouerami@gmail.com">
Zouerami@gmail.com</a>.</p>
</footer>
</body>
</html>
|
مشاهده ی خروجی در JSBin
عنصر <nav>
این عنصر لینک های navigation (مسیریابی – لینک هایی که در بالای سایت هستند مانند «خانه» و «تماس با ما» و …) را در بر می گیرد. نکته ای که باید به آن توجه کنید این است که لازم نیست هر لینکی داخل <nav> قرار بگیرد. <nav> ها تنها برای مجموعه ای از لینک ها هستند که قرار است کاربر را به قسمت خاصی منتقل کنند. مثال:(ایران گستر)
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<!DOCTYPE html>
<html>
<body>
<nav>
<ahref="https://www.roxo.ir/series/html-tutorials/">HTML</a>|
<ahref="https://www.roxo.ir/series/html-tutorials/">CSS</a>|
<ahref="https://www.roxo.ir/series/javascript-tutorials/">JavaScript</a>|
<ahref="https://www.roxo.ir/series/sql-language-tutorial/">MySQL</a>
</nav>
</body>
</html>
|
مشاهده ی خروجی در JSBin
عنصر <aside>
این عنصر محتوایی را تعیین می کند که در کنار محتوای اصلی قرار می گیرد (مانند sidebar ها – مثلا لیست مقالات پر بازدید که به صورت عمودی در برخی از سایت ها موجود است). محتوای درون <aside> باید با محتوای پیرامونش مرتبط باشد.(ایران گستر)
مثال:
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<!DOCTYPE html>
<html>
<body>
<p>My family andIvisited The Epcot center thissummer.</p>
<aside>
<h4>Epcot Center</h4>
<p>The Epcot Center isatheme park inDisney World,Florida.</p>
</aside>
</body>
</html>
|
مشاهده ی خروجی در JSBin
عنصر <figure>
هدف <figure> ارائه ی توضیحات متنی برای یک تصویر است. در HTML5 می توانیم این توضیح متنی را به همراه تصویر مورد نظر در <figure> قرار دهیم. بنابراین درون <figure> یک تگ img و یک تگ <figcaption> قرار دارد که حاوی توضیحات متنی است.(ایران گستر)
مثال:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<!DOCTYPE html>
<html>
<body>
<h2>Places toVisit</h2>
<p>Puglia's most famous sight is the unique conical houses (Trulli) found in the area around Alberobello, a declared UNESCO World Heritage Site.</p>
<figure>
<img src="https://www.w3schools.com/html/pic_trulli.jpg" alt="Trulli" style="width:100%">
<figcaption dir='rtl'>خانههایTrulliدرایتالیا</figcaption>
</figure>
</body>
</html>
|
مشاهده ی خروجی در JSBin
چرا عناصر معنایی؟
در نسخه های قبلی HTML مانند HTML4 توسعه دهندگان بر اساس سلیقه ی خود از هر عنصری که می خواستند برای ایجاد هر قسمتی از صفحه که می خواستند استفاده می کردند. این موضوع باعث می شود که موتور های جست و جو نتوانند قسمت های مختلف یک صفحه را تشخیص دهند اما با عناصر HTML5 این کار راحت تر شده است.(ایران گستر)
:: بازدید از این مطلب : 14
|
امتیاز مطلب : 0
|
تعداد امتیازدهندگان : 0
|
مجموع امتیاز : 0
عضو شوید
عضویت سریع
آمار مطالب
آمار بازدید
